"""
@author: Gaoyaoxia
@date: 2021-02-25 14:49:58
"""
<!-- 扩展按钮组件  "..."-->
<template>
  <div class="menu-button">
    <a-dropdown placement="bottomRight" class="dropdown-btn">
      <a-menu
        class="menus"
        slot="overlay"
        @click="handleMenuClick"
        style="min-width: 90px; text-align: center;border: 1px solid #eaeaea; box-shadow: 0 0 5px #eee"
      >
        <a-menu-item :key="item.key" v-for="item in menus">
          {{ item.label }}
        </a-menu-item>
      </a-menu>
      <a-button>
        <i class="suncnui suncnui-icon-gd"/>
      </a-button>
    </a-dropdown>
  </div>
</template>

<script>
export default {
  props: {
    menus: {
      type: Array,
      default: []
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    handleMenuClick(e) {
      this.$emit('menuClick', e.key)
    }
  },
  created() {}
}
</script>
<style lang='less' scoped>
/**按钮重置样式 */
.dropdown-btn {
  margin: 0px 0px 0px 14px;
  /deep/.ant-dropdown-trigger {
    width: 58px;
    margin-left: 14px;
  }
  .suncnui-icon-gd {
    font-size: 29px;
  }
}
/**菜单按钮重置样式 */
/deep/.ant-dropdown-menu-item {
  color: #777;
  line-height: 24px;
  &:hover {
    color: #1c8de8;
    background: #f5f5f5;
  }
}
/deep/.ant-btn{
  min-width: 56px;
}
</style>